<template>
  <div class="index">
    <div class="title_box">{{itemBasicInfo.itemName}}</div>
    <van-cell-group>
      <div class="item_box">
        <span>实施主体</span>
        
        <p>{{itemBasicInfo.orgName}}</p>
      </div>
      <div class="item_box">
        <span>共同实施部门</span>
        <p>无</p>
      </div>
      <div class="item_box">
        <span>承办机构</span>
        <p>{{itemBasicInfo.agentName}}</p>
      </div>
      <div class="item_box">
        <span>办理情况公开范围</span>
        <p>无</p>
      </div>
      <div class="item_box">
        <span>法定期限</span>
        <p>{{itemBasicInfo.lawTime}}{{itemBasicInfo.lawTimeUnitValue}}</p>
      </div>
      <div class="item_box">
        <span>承诺期限</span>
        <p>{{itemBasicInfo.agreeTime}}{{itemBasicInfo.agreeTimeUnitValue}}</p>
      </div>
      <div class="item_box">
        <span>是否收费</span>
        <p>{{itemBasicInfo.isCharge * 1 === 0 ? '否' : '是'}}</p>
      </div>
      <div class="item_box">
        <span>咨询电话</span>
        <p>{{windowInfo.phone}}</p>
      </div>
      <div class="item_box">
        <span></span>
        是否可以在线申报
        <p>{{itemBasicInfo.isOnlineIcity ? '是' : '否'}}</p>
      </div>
      <div class="item_box">
        <span>实施依据内容摘要</span>
        <p>无</p>
      </div>
      <van-cell v-for="page in pageList" :key="page.path" is-link @click="pageOpen(page)">
        <template #title>
          <img class="icon_img" :src="getIcon(page)" alt="">
          <span v-text="page.name" />
        </template>
      </van-cell>
    </van-cell-group>
    <div style="text-align: center;padding-top: 15px">
      <van-button class="deal_btn" type="info" @click="handleOnline">在线办理</van-button>
    </div>
  </div>
</template>

<script>
  import { apis } from '../request/apis'
  import { pathCodeObj } from '../utils/codeList'
  import { commonConfig } from '../utils/config';
  import appInit from '../utils/appInit'

  export default {
    name: 'index',
    data() {
      return {
        loading: false,
        code: this.$route.query.test ? this.$route.query.code : process.env.VUE_APP_INDEX_ITEM_CODE,
        itemBasicInfo: {},
        windowInfo: {},
        pageList: [
          {
            name: '收费（征收）的标准及依据',
            path: 'price/index.html',
            icon: 'price.png',
            type: 'open'
          },
          {
            name: '受理时间地点',
            path: 'address/index.html',
            icon: 'location.png',
            type: 'open'
          },
          {
            name: '实施依据',
            path: 'accord/index.html',
            icon: 'accord.png',
            type: 'open'
          },
          {
            name: '办理流程',
            path: 'process/index.html',
            icon: 'process.png',
            type: 'open'
          },
          {
            name: '申报材料',
            path: 'material/index.html',
            icon: 'material.png',
            type: 'open'
          },
          {
            name: '受理条件',
            path: 'condition/index.html',
            icon: 'condition.png',
            type: 'open'
          },
        ]
      }
    },
    computed: {
      getIcon() {
        return (page) => {
          return require('../assets/img/' + page.icon);
        }
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler(val) {
          const code = this.$route.query.test ? this.$route.query.code : process.env.VUE_APP_INDEX_ITEM_CODE;
          if (code !== this.code) {
            this.code = code;
            this.init()
          }
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.getDetail()
      },
      getDetail(){
        this.loading = true;
        apis.requestGetXzspjPermission({
          "action": "getPermission",
          "pagemode": "serverV3P5",
          "itemCode": this.code,
        }).then((res) => {
          if(res.success){
            if (this.code === '53144') {
              res.data.materials.forEach((val) => {
                if (val.name === '第三类超限运输护送方案（PDF/Word类型）') {
                  val.name = '第三类超限运输护送方案（图片格式，3M以内）'
                }
              })
            }
            // console.log(res.data.materials)
            this.itemBasicInfo = res.data.itemBasicInfo;
            this.windowInfo = res.data.window[0];
            sessionStorage.setItem('itemBasicInfo',JSON.stringify(res.data.itemBasicInfo));
            sessionStorage.setItem('charge',JSON.stringify(res.data.charge));
            sessionStorage.setItem('window',JSON.stringify(res.data.window));
            sessionStorage.setItem('legalbasis',JSON.stringify(res.data.legalbasis));
            sessionStorage.setItem('outmap',JSON.stringify(res.data.outmap));
            sessionStorage.setItem('materials',JSON.stringify(res.data.materials));
            sessionStorage.setItem('condition',JSON.stringify(res.data.condition));
          }
          this.loading = false;
        })
      },
      pageOpen(page) {
        location.href = commonConfig[commonConfig.type].pageBaseUrl + page.path + '?code=' + this.code + '&t=' + Math.random();
      },
      handleOnline() {
        if (this.$route.query.noCheckUser) {
          this.$router.push({ path: '/handleOnline' });
          return
        }
        appInit.appInit(() => {
          this.$router.push({ path: '/handleOnline' })
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index{
    .deal_btn{
      width: 300px;
      margin: 0 auto;
      border-radius: 8px;
    }
    .item_box {
      width: 100%;
      padding: 0 15px;
      color: #999;
      font-size: 14px;
      line-height: 1.5;
      display: flex;
      span{
        white-space: nowrap;
        display: block;
      }
      p {
        text-align: right;
        flex: 1;
        float: right;
        color: #333;
        margin: 0;
        padding-left: 10px;
      }
      /*&:after{*/
        /*content: "";*/
        /*display: block;*/
        /*clear: both;*/
      /*}*/
    }

    .icon_img {
      width: 20px;
      height: 20px;
      position: relative;
      top: 5px;
      margin-right: 10px;
    }

    .title_box {
      width: 100%;
      padding: 10px 15px;
      line-height: 1.7;
      background: #f7f7f7;
      font-size: 14px;
      color: #333;
    }

    .cell_value {
      color: #333;
    }
  }
</style>
